<sl-drawer
	id="settings"
	class="settings"
	placement="start"
	no-header="true"
	label="Settings"
>
	<sl-icon-button
		id="close-settings"
		class="close"
		library="lucide"
		name="chevron-left"
		label="Close settings"
	></sl-icon-button>

	<div class="titled-section">
		<h3>Theme</h3>
		<sl-select id="theme-select" size="small">
			<sl-visually-hidden slot="label">Theme</sl-visually-hidden>
			<sl-option value="light">Light</sl-option>
			<sl-option value="dark">Dark</sl-option>
			<sl-option value="system">System</sl-option>
			<sl-option value="tab">Penpot</sl-option>
		</sl-select>
	</div>

	<div class="titled-section">
		<h3>Instances</h3>
		<div class="panel-list">
			<div id="instance-list" class="list"></div>
			<sl-button-group label="Add instance">
				<sl-button id="instance-add" variant="primary">
					<sl-icon
						slot="prefix"
						library="lucide"
						name="circle-plus"
						label="Add instance"
					></sl-icon>
					Add instance
				</sl-button>
				<sl-button id="instance-open-creator" variant="primary">
					<sl-icon
						slot="prefix"
						library="lucide"
						name="wand-sparkles"
						label="Create local instance"
					></sl-icon>
					<sl-visually-hidden>Create local instance</sl-visually-hidden>
				</sl-button>
			</sl-button-group>
		</div>
	</div>

	<div class="titled-section">
		<h3>Title Bar Type</h3>
		<sl-select
			id="title-bar-type-select"
			size="small"
			help-text="Change requires a restart to apply."
		>
			<sl-visually-hidden slot="label">Title bar type</sl-visually-hidden>
			<sl-option value="native">Native</sl-option>
			<sl-option value="overlay">Overlay</sl-option>
		</sl-select>
	</div>

	<div class="titled-section info" slot="footer">
		<h3>Info</h3>
		<ul>
			<li><a id="open-docs" href="#">Documentation</a></li>
			<li><a id="open-selfhost" href="#">Selfhost</a></li>
			<li><a id="open-credits" href="#">Credits</a></li>
		</ul>
	</div>
	<sl-include
		id="include-instance-creator"
		src="components/instanceCreator.html"
	></sl-include>
</sl-drawer>

<template id="template-instance-panel">
	<div class="panel" tabindex="0">
		<sl-color-picker format="hsl" opacity="true"></sl-color-picker>
		<div class="body">
			<editable-text
				class="label"
				label="Label"
				placeholder="My instance"
			></editable-text>
			<editable-text
				class="hint"
				label="Origin"
				placeholder="https://my-penpot.example.com"
			></editable-text>
		</div>
		<sl-icon-button
			library="lucide"
			name="square-x"
			size="small"
			label="Delete instance"
		></sl-icon-button>
	</div>
</template>
